import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wanchong/app/store/search_result.dart';
import 'package:wanchong/conf.dart';

class Search extends StatefulWidget {
  @override
  _SearchState createState() => _SearchState();
}

class _SearchState extends State<Search> {
  List<String> rec = [
    "洗澡",
    "美容",
    "猫咪去势",
    "剪指甲",
    "领养",
    "大放异育苗",
    "配种",
    "待产",
    "洗澡",
    "美容",
    "猫咪去势",
  ];
  List<SearchList> res = List();
  TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar(
        automaticallyImplyLeading: false,
        elevation: 0,
        backgroundColor: Colors.white,
        title: Row(
          children: <Widget>[
            Container(
              // color: Colors.red,
              width: ScreenUtil.getInstance().setWidth(305),
              child: Center(
                child: TextField(
                  controller: _controller,
                  decoration: InputDecoration(
                    hintText: "输入商家、服务名称",
                    hintStyle: TextStyle(
                      fontSize: ScreenUtil.getInstance().setWidth(15),
                      color: Color(0xFFB4BEC6),
                    ),
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(5),
                        borderSide: BorderSide.none),
                    fillColor: Color(0xFFFAFAFA),
                    filled: true,
                    contentPadding: EdgeInsets.all(10.0),
                  ),
                  onChanged: (text) async {
                    res.clear();

                    ///输入框变化，请求网络
                    if (text.length > 0) {
                      await _getRes();
                    }
                    setState(() {});
                  },
                  onSubmitted: (text) {
                    _toSearchResult(text);
                  },
                  textInputAction: TextInputAction.search,
                ),
              ),
            ),
            SizedBox(
              width: ScreenUtil.getInstance().setWidth(8.0),
            ),
            GestureDetector(
              onTap: () {
                Navigator.of(context).pop();
              },
              child: Container(
                child: Text(
                  "取消",
                  style: TextStyle(
                      fontSize: ScreenUtil.getInstance().setWidth(14.0),
                      color: Color(0xFF647280)),
                ),
              ),
            ),
          ],
        ),
      ),
      body: res.length == 0 ? _normal() : _resList(),
    );
  }

  Widget _resList() {
    return Container(
      color: Colors.white,
      child: Column(
        children: res.map((SearchList item) {
          return Container(
            margin: const EdgeInsets.only(
              left: 15.0,
              top: 14.0,
              // bottom: 15.0,
            ),
            padding: const EdgeInsets.only(
              right: 14.0,
            ),
            // color: Colors.red,
            width: double.infinity,
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Icon(Icons.search),
                    SizedBox(
                      width: 10.0,
                    ),
                    Text(
                      item.title,
                      style: TextStyle(
                        color: Color(MainColor),
                        fontSize: ScreenUtil.getInstance().setSp(14.0),
                      ),
                    ),
                    Expanded(
                      child: Container(),
                    ),
                    Text(
                      "约" + item.number + "个结果",
                      style: TextStyle(
                        color: Color(0xFF647280),
                        fontSize: ScreenUtil.getInstance().setSp(14.0),
                      ),
                    ),
                  ],
                ),
                SizedBox(
                  height: 14.0,
                ),
                Divider(
                  color: Color(BorderColor),
                  height: ScreenUtil.getInstance().setHeight(1.0),
                ),
              ],
            ),
          );
        }).toList(),
      ),
    );
  }

  Widget _normal() {
    return Container(
      width: double.infinity,
      color: Colors.white,
      padding: EdgeInsets.all(15.0),
      child: Column(
        children: <Widget>[
          Container(
            width: double.infinity,
            child: Text(
              "热门搜索",
              style: TextStyle(
                fontSize: ScreenUtil.getInstance().setSp(14.0),
                color: Color(MainColor),
              ),
            ),
          ),
          SizedBox(
            height: 14.0,
          ),
          Container(
            width: double.infinity,
            child: Wrap(
              alignment: WrapAlignment.start,
              crossAxisAlignment: WrapCrossAlignment.start,
              runAlignment: WrapAlignment.start,
              spacing: ScreenUtil.getInstance().setWidth(12.0),
              runSpacing: ScreenUtil.getInstance().setWidth(12.0),
              children: rec.map((String title) {
                return _item(title);
              }).toList(),
            ),
          ),
          Container(
              padding: EdgeInsets.only(
                top: ScreenUtil.getInstance().setHeight(14.0),
                bottom: ScreenUtil.getInstance().setHeight(14.0),
              ),
              width: double.infinity,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text(
                    "历史搜索",
                    style: TextStyle(
                      fontSize: ScreenUtil.getInstance().setSp(14.0),
                      color: Color(MainColor),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {},
                    child: Icon(
                      Icons.account_balance,
                      color: Color(0xFF647280),
                      size: ScreenUtil.getInstance().setSp(15),
                    ),
                  )
                ],
              )),
          Container(
            width: double.infinity,
            child: Wrap(
              alignment: WrapAlignment.start,
              crossAxisAlignment: WrapCrossAlignment.start,
              runAlignment: WrapAlignment.start,
              spacing: ScreenUtil.getInstance().setWidth(12.0),
              runSpacing: ScreenUtil.getInstance().setWidth(12.0),
              children: rec.map((String title) {
                return _item(title);
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }

  Widget _item(String title) {
    return GestureDetector(
      onTap: () {
        _toSearchResult(title);
      },
      child: Container(
        padding: EdgeInsets.all(ScreenUtil.getInstance().setHeight(8.0)),
        decoration: BoxDecoration(
            color: Color(0xFFF2F1F0), borderRadius: BorderRadius.circular(2.0)),
        child: Text(
          title,
          style: TextStyle(
            color: Color(MainColor),
            fontSize: ScreenUtil.getInstance().setSp(12.0),
          ),
        ),
      ),
    );
  }

  _getRes() async {
    await Future.delayed(Duration(seconds: 1), () {
      res.add(SearchList(title: "宠物店", number: "175"));
      res.add(SearchList(title: "宠物绝育", number: "175"));
      res.add(SearchList(title: "宠物冰葬", number: "175"));
      res.add(SearchList(title: "宠物洁牙", number: "175"));
      res.add(SearchList(title: "新之旅宠物医院", number: "175"));
      res.add(SearchList(title: "七七路宠物美容", number: "175"));
      res.add(SearchList(title: "金项圈宠物训练", number: "175"));
      res.add(SearchList(title: "宠物训练中心", number: "175"));
      res.add(SearchList(title: "宠物绝育", number: "175"));
    });
  }

  _toSearchResult(String keywords) {
    Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (BuildContext context)=>SearchResult(keywords: keywords,)));
  }
}

class SearchList {
  String title;
  String number;
  SearchList({this.title, this.number});
}
